<template>
  <div>当前鼠标位置</div>
  <div>x: {{ mouse.x }}</div>
  <div>y: {{ mouse.y }}</div>
  <div>当前点击次数：{{ count }}</div>
  <button @click="add">点击</button>
</template>

<script>
import { onMounted, onUnmounted, reactive, ref } from 'vue'

// 业务1
function useMouse() {
  const mouse = reactive({
    x: 0,
    y: 0,
  })
  const move = e => {
    mouse.x = e.pageX
    mouse.y = e.pageY
  }
  onMounted(() => {
    document.addEventListener('mousemove', move)
  })
  onUnmounted(() => {
    document.removeEventListener('mousemove', move)
  })
  return { mouse }
}

// 业务2
function useCount() {
  const count = ref(0)
  const add = () => {
    count.value++
  }
  return { count, add }
}

// 组件中使用
export default {
  setup() {
    // 调用函数并解构返回值
    const { count, add } = useCount()
    const { mouse } = useMouse()
    // 返回给模板使用
    return { count, add, mouse }
  },
}
</script>
